<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 --> 
            <el-header>
                <el-row justify="space-between" align="middle">
                    <el-col :span="6">
                        <div class="breadcrumb">
                            <el-icon><Fold /></el-icon>
                            <span>财务</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="user-info">
                            <el-avatar :size="30" src="" />
                            <span class="username">admin</span>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-header class="white"></el-header>
            <!--内容部分-->
            <el-main>
                <!--搜索部分-->
                <el-header class="search">
                    <el-select v-model="companyValue" placeholder="请选择公司" style="width: 200px">
                        <el-option
                        v-for="item in companyOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                    <el-input v-model="search" style="width: 240px" placeholder="请输入持有人姓名或手机号" />
                    <el-select v-model="statusValue" placeholder="请选择状态" style="width: 200px">
                        <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                    <el-select v-model="sortValue" placeholder="排序方式" style="width: 200px">
                        <el-option label="按申请时间倒序" value="applyTime_desc" />
                        <el-option label="按申请时间正序" value="applyTime_asc" />
                        <el-option label="按提现金额倒序" value="amount_desc" />
                        <el-option label="按提现金额正序" value="amount_asc" />
                    </el-select>
                    <el-button type="primary" @click="getList">搜索</el-button>
                </el-header>
                <!--余额部分-->
                <el-header class="balance">
                    <p class="wechatBalanceText">迈玛微信余额：</p>
                    <p class="wechatBalance">0</p>元
                    <el-button class="recharge">
                        <el-icon><Coin /></el-icon>
                        充值
                    </el-button>
                    <p class="alipyBalanceText">迈玛支付宝余额：</p>
                    <p class="alipyBalance">0</p>元
                    <el-button class="recharge">
                        <el-icon><Coin /></el-icon>
                        充值
                    </el-button>
                </el-header>
                <!--刷新部分-->
                <el-header class="refresh">
                    <el-button type="info" @click="handleRefresh">
                       <el-icon><Refresh /></el-icon>
                       刷新
                    </el-button>
                </el-header>
                <!--表格部分-->
                <el-table :data="tableData" border style="width: 98%" v-loading="loading">
                    <el-table-column prop="userId" label="用户信息" width="8%" >
                        <template #default="scope">
                            <!-- 自定义用户信息样式 -->
                            <div class="user-info-cell">
                            <span class="user-name">{{ scope.row.nickname || '未知用户' }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="8%" />
                    <el-table-column prop="amount" label="提现金额/元" width="8%" />
                    <el-table-column prop="withdrawalPlatform" label="提现平台" width="8%" />
                    <el-table-column prop="applyTime" label="申请时间" width="15%" />
                    <el-table-column prop="source" label="来源" width="5%"  />
                    <el-table-column prop="nickname" label="审核人" width="5%" />
                    <el-table-column prop="ReviewTime" label="审核时间" width="15%" />
                    <el-table-column prop="status" label="打款状态"  width="5%" />
                    <el-table-column prop="paymentPlatform" label="付款平台" width="5%" />
                    <!-- 修复：原字段重复，改为 paymentPlatform -->
                    <el-table-column prop="note" label="备注" width="8%" />
                    <el-table-column label="操作" width="10%">
                        <template #default="scope">
                            <el-button 
                            class="audit"
                            size="small" 
                            type="primary" 
                            @click="handleAudit(scope.row, scope.$index)"
                            >
                            待审核
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页器-->
                <div class="demo-pagination-block">
                    <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </el-container>
    </div>
       <el-dialog 
            v-model="dialogVisible" 
            title="修改状态"  
            width="400px"
            :close-on-click-modal="true"  
        >
                状态选择
                    <el-select v-model="dialogFrom.status" placeholder="请选择状态" style="width: 100%">
                        <el-option label="待审核" value="0" />
                        <el-option label="通过" value="1" />
                        <el-option label="拒绝" value="2" />
                        <el-option label="打款中" value="3" />
                        <el-option label="失败" value="4" />
                    </el-select>
                备注：<el-input v-model="dialogFrom.input"></el-input>
            <button>取消</button>
            <button @click="sure">确定</button>
        </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { Fold, Refresh, Coin } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getworkList } from '@/components/Finance/DeviceStatisics'

// 搜索相关
const search = ref('')
const companyValue = ref('') // 公司选择
const statusValue = ref('') // 状态选择
const sortValue = ref('applyTime_desc') // 排序方式（默认按申请时间倒序）
let dialogVisible=ref(false)
let dialogFrom=reactive({
    status:'',
    input:''
})


// 下拉选项（可根据实际接口需求修改）
const companyOptions = ref([
    { label: '全部公司', value: '' },
    { label: '迈玛科技', value: 'maima' },
    { label: '其他公司', value: 'other' }
])
const statusOptions = ref([
    { label: '全部状态', value: '' },
    { label: '待审核', value: 'pending' },
    { label: '已通过', value: 'approved' },
    { label: '已拒绝', value: 'rejected' },
    { label: '已打款', value: 'paid' }
])

// 分页相关
const currentPage = ref(1) // 当前页码
const pageSize = ref(20) // 每页条数
const total = ref(0) // 总条数
const loading = ref(false) // 加载状态

// 表格数据
const tableData = ref([])

// 获取请求参数（整合搜索、分页、排序条件）
const getRequestParams = () => {
    // 解析排序字段和排序方向
    const [sortField, sortOrder] = sortValue.value.split('_')
    return {
        pageSize: pageSize.value,
        pageIndex: currentPage.value,
        is_holder: 1,
        // 搜索条件
        keyword: search.value.trim(), // 持有人姓名/手机号
        company: companyValue.value, // 公司筛选
        status: statusValue.value, // 状态筛选
        // 排序条件
        sortField: sortField, // 排序字段（applyTime/amount）
        sortOrder: sortOrder, // 排序方向（desc/asc）
    }
}

// 获取列表数据
const getList = async () => {
    loading.value = true
    const data = getRequestParams()
    try {
        const res = await getworkList(data)
        console.log('接口返回数据：', res)
        if (res.code === 200) {
            tableData.value = res.dataset.list || []
            total.value = res.dataset.totalSize || 0
            // 处理空数据提示
            if (tableData.value.length === 0) {
                ElMessage.info('当前条件下无数据')
            }
        } else {
            ElMessage.error(`获取数据失败：${res.msg || '未知错误'}`)
            tableData.value = []
            total.value = 0
        }
    } catch (error) {
        console.error('获取数据异常：', error)
        ElMessage.error('网络异常，请重试')
        tableData.value = []
        total.value = 0
    } finally {
        loading.value = false
    }
}

// 分页事件：每页条数改变
const handleSizeChange = (val) => {
    pageSize.value = val
    currentPage.value = 1 // 重置为第一页
    getList() // 重新获取数据
}

// 分页事件：当前页码改变
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList() // 重新获取数据
}

// 刷新页面
const handleRefresh = () => {
    // 重置搜索条件和分页
    search.value = ''
    companyValue.value = ''
    statusValue.value = ''
    sortValue.value = 'applyTime_desc'
    currentPage.value = 1
    pageSize.value = 20
    getList() // 重新获取数据
}

// 审核操作
const handleAudit = (row, index) => {
    console.log('待审核数据：', row)
    // 这里可以打开审核弹窗或跳转到审核页面
    // 示例：可以传递row.id到审核接口
    // router.push({ path: '/audit', query: { id: row.id } })
    dialogVisible.value=true;
    
}
//确定
let sure=()=>{
    console.log(dialogFrom);
    
}
// 初始化加载数据
onMounted(() => {
    getList()
})
</script>

<style lang="less" scoped>
/* 头部部分 */
.el-header {
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
}
.breadcrumb {
    display: flex;
    align-items: center;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.white {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 内容部分 */
.el-main {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 搜索部分 */
.search {
    width: 100%;
    border: none;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; // 适配小屏幕
    padding: 0 1%;
}

/* 余额部分 */
.balance {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    color: red;
    font-size: 16px;
    padding: 0 1%;
}

/* 充值按钮 */
.recharge {
    background-color: rgb(243, 232, 211);
    border-color: orange;
    color: orange;
    margin-left: 5px;
}

/* 刷新部分 */
.refresh {
    width: 100%;
    border: none;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 0 1%;
}

/* 表格部分 */
::v-deep .el-table {
    margin-bottom: 16px;
}
::v-deep .el-table .el-table__header {
    width: 100% !important;
}
::v-deep .el-table .el-table__body {
    width: 100% !important;
}
::v-deep .el-table .el-table__row {
    height: 80px;
}
.user-info-cell {
    width: 60px; /* 固定容器宽度 */
}
.user-name {
    color: #025afe;
    background-color: rgb(178, 229, 255);
    font-weight: 500;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px 0;
}

/* 分页器 */
.demo-pagination-block {
    width: 98%;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* 适配小屏幕 */
@media (max-width: 1440px) {
    .search {
        gap: 8px;
    }
    .search el-select, .search el-input {
        width: 160px !important;
    }
}
</style>